<ion-header>

  <ion-navbar>
    <ion-title>注册金兰宝会员</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <form [formGroup]="validateForm" (submit)="register($event)">
    <ion-list class="mb">
      <ion-item>
        <ion-label fixed for="phone">
          <ion-icon name="md-phone-portrait"></ion-icon>
        </ion-label>
        <ion-input type="tel" id="phone" formControlName="phone" placeholder="请输入手机号"></ion-input>
      </ion-item>
      <div class="error-message" *ngIf="getFormControl('phone').dirty&&getFormControl('phone').hasError('required')">
        请输入手机号
      </div>
      <div class="error-message" *ngIf="getFormControl('phone').dirty&&getFormControl('phone').hasError('pattern')">
        请输入正确的手机号
      </div>

      <ion-item>
        <ion-label fixed for="account">
          <ion-icon name="md-person"></ion-icon>
        </ion-label>
        <ion-input type="text" id="account" formControlName="account" placeholder="请输入账号"></ion-input>
      </ion-item>
      <div class="error-message"
           *ngIf="getFormControl('account').dirty&&getFormControl('account').hasError('required')">请输入账号
      </div>
      <div class="error-message"
           *ngIf="getFormControl('account').dirty&&getFormControl('account').hasError('pattern')">请输入由数字字母下划线组成的账号
      </div>

      <ion-item>
        <ion-label fixed for="realName">
          <ion-icon name="md-person"></ion-icon>
        </ion-label>
        <ion-input type="text" id="realName" formControlName="realName" placeholder="请输入真实姓名"></ion-input>
      </ion-item>
      <div class="error-message"
           *ngIf="getFormControl('realName').dirty&&getFormControl('realName').hasError('required')">请输入真实姓名
      </div>

      <ion-item>
        <ion-label fixed for="password">
          <ion-icon name="md-unlock"></ion-icon>
        </ion-label>
        <ion-input type="password" id="password" formControlName="password" placeholder="请输入密码"></ion-input>
      </ion-item>
      <div class="error-message" *ngIf="getFormControl('password').dirty&&getFormControl('password').errors">
        <ng-container *ngIf="getFormControl('password').hasError('required')">请输入密码</ng-container>
      </div>

      <ion-item>
        <ion-label fixed for="pinPassword">
          <ion-icon name="md-unlock"></ion-icon>
        </ion-label>
        <ion-input type="password" id="pinPassword" formControlName="pinPassword" placeholder="请输入交易密码"></ion-input>
      </ion-item>
      <div class="error-message"
           *ngIf="getFormControl('pinPassword').dirty&&getFormControl('pinPassword').hasError('required')">请输入交易密码
      </div>

      <ion-item class="mt">
        <ion-label fixed for="referenceAccount">
          <ion-icon name="md-share"></ion-icon>
        </ion-label>
        <ion-input type="text" id="referenceAccount" formControlName="referenceAccount" [readonly]="isReferenceAccount"
                   placeholder="推荐人账户"></ion-input>
      </ion-item>
      <div class="error-message" *ngIf="getFormControl('referenceAccount').dirty&&getFormControl('referenceAccount').hasError('required')">
        推荐人账户
      </div>

    </ion-list>


    <ion-grid>
      <ion-row>
        <ion-col col-12>
          <button ion-button color="primary" block type="submit" [disabled]="isLoading">提交</button>
        </ion-col>
      </ion-row>
      <ion-row>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>
